<!DOCTYPE html>
<html lang="en"  xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>
<body>
<div id="app">
    <div>
        <input  v-model="username" placeholder="username" type="text" />
    </div>
    <div>
        <input v-model="password" placeholder="password" type="password">
    </div>
    <div>
        <button v-on:click="click1" >登录</button>

    </div>
</div>
<script>
    var app = new Vue({
        // e1: '#app',
        //注意这时l来着
        el: '#app',
        data: {
            appId:"2056622217",
            username: "admin",
            password: "password1",
            // baseUrL:"http://47.94.215.148:8080",
            // baseUrL:"http://192.168.1.105:8080",
            baseUrL:"http://localhost:8080",
            url:'/admin/login' ,
            forwardUrl: "/html/hello1.html",
            failMessage: null,
            ticket:null,
            randstr:null
        },
        methods: {
            click1: function () {
                alert("password:"+this.password)
                alert("username:"+this.username)
                // 方法1: 直接生成一个验证码对象。
                var captcha1 = new TencentCaptcha(this.appId, (res)=>{
                    console.log(res)
                    // res（用户主动关闭验证码）= {ret: 2, ticket: null}
                    // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
                    if(res.ret === 0){
                        // alert("ticket"+res.ticket)
                        // 票据
                        // alert(res.randstr)
                        this.ticket=res.ticket
                        this.randstr=res.randstr
                        alert("ticket"+this.ticket)
                        // 票据
                        alert(this.randstr)
                        axios({
                            method: 'POST',
                            url: this.url,
                            data: {
                                username: this.username,
                                password: this.password,
                                ticket: this.ticket,
                                randstr: this.randstr
                            },
                            transformRequest: [function (data) {
                                let ret = ''
                                for (let it in data) {
                                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                                }
                                return ret
                            }],
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        }).then((response) => {
                            alert(response.data.status)
                            if (response.data.status == 0) {
                                //登录成功,重定向
                                alert("unAuthenticated")
                                // window.location.href = this.forwardUrl;
                                return;
                            }
                            if(response.data.status == 2) {
                                alert("密码或者用户名错误")
                                //登录失败
                                // this.failMessage = "登录失败"
                                return
                            }

                            if(response.data.status == 1) {
                                alert("登录成功")
                                window.location.href = this.forwardUrl;
                                return
                            }

                            if(response.data.status == 3) {
                                alert("登录失败,可能没有权限")
                                return
                            }

                        })

                    }

                });
                captcha1.show(); // 显示验证码
            }
        }

    })
    app.url=app.baseUrL+app.url;
    app.forwardUrl=app.baseUrL+app.forwardUrl;

</script>
</body>
</html>